<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>杨澎锴实践作业20-d3制造柱状图</title>
    <script src="https://cdn.bootcss.com/d3/5.15.1/d3.js"></script>
    <style>
      .headerText text {
        fill: #0b3536;
      }

      #zzt {
        border: 1px solid #0b3536;
        border-radius: 6px;
        fill: #0098d8;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>使用D3.js制作柱状图</h1>
    </header>
    <main>
      <!-- 制作柱状图所在的容器 -->
      <div class="container">
        <div id="zzt"></div>
      </div>
    </main>
    <footer></footer>

    <script>
      //柱状图注意坐标轴之间的边距

      //设定柱状图画布的大小和间距
      const padding = {
        top: 50,
        right: 20,
        bottom: 30,
        left: 30,
      };
      const width = 760 - padding.left - padding.right;
      const height = 380 - padding.top - padding.bottom;

      //   插入数据
      var data = [
        {
          name: "赵相",
          value: 50,
        },
        {
          name: "钱财",
          value: 70,
        },
        {
          name: "孙子",
          value: 90,
        },
        {
          name: "李明",
          value: 100,
        },
        {
          name: "周宝",
          value: 95,
        },
        { name: "吴用", value: 85 },
        { name: "郑重", value: 70 },
        { name: "王八", value: 50 },
        { name: "冯制", value: 25 },
        { name: "陈酿", value: 5 },
      ];
      //   获取x轴的数据
      //设置参数传出
      var Xdatas = data.map(function (d) {
        return d.name;
      });
      //   获取引入变量中的y轴变量value
      var values = data.map(function (d) {
        return d.value;
      });
      //svg加入到柱状图的容器DOM当中
      var svg = d3
        .select("#zzt")
        .append("svg")
        .attr("width", width + padding.left + padding.right)
        .attr("height", height + padding.top + padding.bottom);
      // 添加比例尺
      var xScale = d3
          .scaleBand()
          .domain(Xdatas)
          .rangeRound([0, width])
          .padding(0.2),
        yScale = d3
          .scaleLinear()
          .domain([0, d3.max(values)])
          .rangeRound([height, 0]);

      // 将group元素添加到svg容器中
      var g = svg
        .append("g")
        .attr(
          "transform",
          "translate(" + padding.left + "," + padding.top + ")"
        );

      //添加表头
      g.attr("class", "headerText")
        .append("text")
        .attr(
          "transform",
          "translate(" + width / 2 + "," + -padding.top / 2 + ")"
        )
        .attr("text-anchor", "middle")
        .attr("font-weight", 600)
        .text("考试成绩案例");

      // 添加x轴
      g.append("g")
        .attr("calss", "axisX")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xScale))
        .attr("font-weight", "bold");

      //添加y轴
      g.append("g").attr("class", "axisY").call(d3.axisLeft(yScale).ticks(10));

      //创建盛放矩形元素的容器
      var chart = g.selectAll("#zzt").data(data).enter().append("g");

      //添加图形矩形元素
      chart
        .append("rect")
        .attr("class", "bar")
        .attr("x", function (d) {
          return xScale(d.name);
        })
        .attr("y", function (d) {
          return yScale(d.value);
        })
        .attr("height", function (d) {
          return height - yScale(d.value);
        })
        .attr("width", xScale.bandwidth());

      // 矩形当中的提示文字
      chart
        .append("text")
        .attr("class", "barText")
        .attr("x", function (d) {
          return xScale(d.name);
        })
        .attr("y", function (d) {
          return yScale(d.value);
        })
        .attr("dx", xScale.bandwidth() / 2)
        .attr("dy", 20)
        .attr("text-anchor", "middle")
        .text(function (d) {
          return d.value;
        });
      chart
        .on("mouseover", function (d) {
          d3.select(this).attr("opacity", 0.7);
        })
        .on("mouseout", function (d) {
          d3.select(this).transition().duration(500).attr("opacity", 1);
        });
    </script>
  </body>
</html>
